<template>
  <div class="minPageCon">
      <div class="des">
          <p v-if="userType=='personal'">전문가가 도와주는</br>당신의 2번째 커리어,</br><b>지금 시작해볼까요?</b></p>          
          <p v-else>기업에서 필요로하는</br>경력이 풍부한 인재,</br><b>지금 만나볼까요?</b></p>   
          <img src="@images/login_bg.png" alt="">
      </div>
      <div class="box">
        <h1>비밀번호 변경</h1>
        <p class="info">
          새로운<br/>
          <b>비밀번호</b>를<br/>
          입력해주세요.
        </p>
        <el-form class="loginFrm forgotFrm" :model="resetFrm" :rules="rules" ref="resetFrm">
            <el-form-item prop="password">
                <el-input type="password" v-model="resetFrm.password" placeholder="영문, 숫자, 특수문자 포함 8자 이상 입력" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="password_confirmation">
                <el-input type="password" v-model="resetFrm.password_confirmation" placeholder="비밀번호를 한번 더 입력해주세요." autocomplete="off"></el-input>
            </el-form-item>            
            <el-form-item>
                <el-button :loading="loading" type="primary" class="subBtn" @click="submitForm('resetFrm')">확인</el-button>
            </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { chancePassword } from '@/api';
import { Local } from '@/utils'
import { removeToken } from '@/utils/auth'

export default {
  name:'',
  components:{},
  props:[],
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('비밀번호입력'));
      }else if(!value.match(/(?=.*\d)(?=.*[a-z]).{8,}/)){
          callback(new Error('영문,숫자,특수문자포함8자이상입력'));
      } else {
        if (this.resetFrm.password_confirmation !== '') {
          this.$refs.resetFrm.validateField('password_confirmation');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('비밀번호를한번더입력해주세요'));
      } else if (value !== this.resetFrm.password) {
        callback(new Error('두번의입력비밀번호가일치하지않습니다'));
      } else {
        callback();
      }
    };
    return {
      userType:'',
      loading:false,
      showTime: true,
      sendTime: '',
      timer: null,       
      resetFrm: {
        password: '',
        password_confirmation: '',
      },
      rules: {
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        password_confirmation: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  computed:{},
  created(){
    this.userType = this.$route.query.userType || 'personal';
  },
  mounted(){},
  methods:{
    ...mapActions(['setUserToken']),
    submitForm(formName) {
      let that=this;
      this.$refs[formName].validate(async (valid,error) => {
        if (valid) {
          that.loading = true;
          let res = await chancePassword(that.resetFrm);            
            if (res.code == 200) {
              that.loading = false;
              removeToken();
              that.$alert('비밀번호가 정상적으로 변경 되었습니다.', '알림', {
                confirmButtonText: '확인',
                callback: action => {
                  that.$router.replace({ path:'/login',query:{userType:that.userType}})
                }
              });              
            }else{
              that.loading = false;
              that.$alert(res.message, '알림', {
                confirmButtonText: '확인'
              });
            }  
        } else {
          return false;
        }
      });
    },
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "css/user.scss";
</style>